// css-in-js方案来完成对组件中html标签进行样式定义
//  + style-components，此库就是实现以技术的库，此库把样式当作一个组件来进行使用
//  + style-components 样式的写和scss等相似
import styled from 'styled-components'

// 标题设置为红色字体
// export const TitleStyle = styled.div`
//   color: red;
// `
export const ButtonStyle = styled.button`
  color: blue;
  font-size: 20px;
  height: 40px;
  line-height: 40px;
`

// 样式嵌套
export const ChildBoxStyle = styled.div`
  .title {
    color: red;
  }
  .content {
    color: blue;
  }
`
// 样式继承
export const ButtonStyle2 = styled(ButtonStyle)`
  color: green;
`

// 属性传递
export const TitleStyle = styled.div`
  color: ${(props) => props.color || 'blue'};
  font-size: ${({ size = 20 }) => size}px;
`
